<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />
<link rel="stylesheet" type="text/css" href="../../css/upload/fileinput.css" />

<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/upload/fileinput.js"></script>
<script type="text/javascript" src="../../js/login/jquery.form.min.js"></script>

<link rel="stylesheet" type="text/css" href="../../css/bootstrapValidator.min.css" />
<script type="text/javascript" src="../../js/bootstrapValidator.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12" style="padding-bottom: 10px">
				<%@include file="../common/header.jsp"%>
			</div>
		</div>
		<div class="row clearfix" style="height:600px">
			<div class="col-md-12">
				<h4 class="heading">欢迎注册</h4>
				<div class="myline"></div>
				<form class="form-horizontal" enctype="multipart/form-data" style="padding-top: 50px" id="registerForm" method="post">
					<div class="row">
						<div class="col-md-3"></div>
						<div class="col-md-5">
							<div class="form-group">
								<label class="col-md-3 control-label">昵称:</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="nickname" id="nickname">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">密码:</label>
								<div class="col-md-9">
									<input type="password" class="form-control" name="password" id="password">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">确认密码:</label>
								<div class="col-md-9">
									<input type="password" class="form-control" name="repassword" id="repassword">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">手机号:</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="telephonename" id="telephonename">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">手机验证码:</label>
								<div class="col-md-9">
									<div class="input-group">
										<input type="text" class="form-control" name="checkphone" id="checkphone"> <span class="input-group-btn">
											<button class="btn btn-default" id="btnSendCode" onclick="sendMessage()">点击获取验证码</button>
										</span>

									</div>
								</div>

							</div>

							<center>
								<div class="form-group sepH_c">
									<div class="col-md-12">
										<button type="button" class="btn  btn-info" id="regbutton" onclick="submitForm()">立刻注册</button>
									</div>
								</div>
							</center>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-12" style="padding-bottom: 10px">
				<%@include file="../common/bottom.jsp"%>
			</div>
		</div>
	</div>
</body>
<script>
	//短信验证码    
	var InterValObj; //timer变量，控制时间      
	var count = 60; //间隔函数，1秒执行      
	var curCount;//当前剩余秒数      
	var code = ""; //验证码      
	var codeLength = 6;//验证码长度   
	function sendMessage() {
		curCount = 120;
		//获取手机号码
		var jbPhone = $("#telephonename").val();
		//手机号码不为空
		if (jbPhone != "") {
			for (var i = 0; i < codeLength; i++) {
				code += parseInt(Math.random() * 9).toString();
			}
			// 设置button效果，开始计时      
			$("#btnSendCode").attr("disabled", "true");
			$("#btnSendCode").text(curCount + "秒后重新获取");
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次      
			// 向后台发送处理数据 
			var content = "【创新人才】您本次的验证码是" + code + "，欢迎您注册！";		
				 $.ajax({
						type : "get", // 用POST方式传输   
						async: false,
						dataType: "jsonp",  
			            jsonp: "callback",
			            jsonpCallback:"callback",
						crossDomain:true,  
						url : "http://211.149.203.162:8868/sms.aspx", // 目标地址      
						data : {
							"action" : "send",
							"userid" : "195",
							"account" : "sxrcfz",
							"password" : "cxrc85309181",
							"mobile" : jbPhone,
							"content" : content,
							"sendTime" : "",
							"extno" : ""
						}, 
						error : function() {
							 alert("验证码已发送，请查看手机");
						},
						success : function(data) {
							
						}
					});
		}
	}
	
	//timer处理函数      
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj);// 停止计时器      
			$("#btnSendCode").removeAttr("disabled");// 启用按钮      
			$("#btnSendCode").text("重新发送验证码");
			
			code = ""; // 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
		} else {
			curCount--;
			$("#btnSendCode").text(curCount + "秒后重新获取");
		}
	}

	//点击注册按钮
    function submitForm(){
    	var bootstrapValidator = $("#registerForm").data('bootstrapValidator');
    	$('#registerForm').bootstrapValidator('validate');
		 $("#regbutton").attr("disabled",false);
    	if(bootstrapValidator.isValid()){
    		$.ajax({
    			url : "../permission/register",
    			type : "POST",
    			dataType : "json",
    			data : {
    				"user_id":$("#telephonename").val(),
    				"user_name":$("#nickname").val(),
    				"user_password":$("#password").val()
    			},
    			success : function(data) {
    				if(data==1){
    					window.location.href="registerok.jsp";
    				}
    				if(data!=1)
    					alert("注册失败");
    			}
    		});
    	}
    	
    }
	$(document).ready(function() {	
		$('#registerForm').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				nickname : {/*键名和input name值对应*/
					message : '昵称无效',
					validators : {
						notEmpty : {/*非空提示*/
							message : '昵称不能为空'
						},
						regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
							regexp : /^[A-Za-z0-9\u4e00-\u9fa5]{3,16}$/,
							//^[a-zA-Z0-9_\.]+$/,
							message : '用户名只能是字母、数字、汉字'
						},
						stringLength : {/*长度提示*/
							min : 3,
							max : 30,
							message : '用户名长度必须在3到30之间'
						}
					/*最后一个没有逗号*/
					}
				},
				password : {/*键名和input name值对应*/
					message : '密码无效',
					validators : {
						notEmpty : {/*非空提示*/
							message : '密码不能为空'
						},
						regexp : {/* 只需加此键值对，包含正则表达式，和提示 */
							regexp : /^[a-zA-Z0-9_\.]+$/,
							message : '只能是数字和字母.'
						},
						stringLength : {/*长度提示*/
							min : 6,
							max : 12,
							message : '密码长度必须在6到12之间'
						}
					/*最后一个没有逗号*/
					}
				},
				repassword : {
					message : '密码无效',
					validators : {
						notEmpty : {
							message : '确认密码不能为空'
						},
						stringLength : {
							min : 6,
							max : 12,
							message : '确认密码长度必须在6到12之间'
						},
						identical : {//相同
							field : 'password',
							message : '两次密码不一致'
						},
						regexp : {//匹配规则
							regexp : /^[a-zA-Z0-9_\.]+$/,
							message : '只能是数字和字母'
						}
					}
				},
				telephonename : {
					message : '手机号码无效',
					validators : {
						notEmpty : {
							message : '手机号码不能为空'
						},
						stringLength : {
							min : 11,
							max : 11,
							message : '请输入11位手机号码'
						},
						regexp : {
							regexp : /^1[3|4|5|6|8|7|9]{1}[0-9]{9}$/,
							message : '请输入正确的手机号码'
						},
						threshold :  11 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
	                    remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
	                         url: '../permission/haveuser',//验证地址
	                         message: '该手机已经注册过',//提示消息           
	                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
	                         type: 'POST'//请求方式                       
	                         /**自定义提交数据，默认值提交当前input value
	                          *  data: function(validator) {
	                               return {
	                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
	                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
	                               };
	                            }
	                          */
	                     }
					}
				},
				checkphone : {
					message : '验证码错误',
					validators : {
						notEmpty : {
							message : '手机验证码不能为空'
						},
						stringLength : {
							min : 6,
							max : 6,
							message : '请输入6位手机验证码'
						},
						callback: {/*自定义，可以在这里与其他输入项联动校验*/
			                 message: '验证码错误',
			                 callback:function(value, validator,$field){
			                     return value===code;
			                 }
			             }
					}
				}
			}
		});
	});
</script>
</html>